<script setup lang="ts">
import { ObjectMeta } from "@/views/domain/kubeHud/api/k8s/types";
import NamespaceSelector from "@/views/domain/kubeHud/views/k8s/namespace/widgets/NamespaceSelector.vue";
import { ref } from "vue";

const metadata = defineModel<ObjectMeta>({
  required: true,
  default: () => ({
    labels: {},
    annotations: {}
  })
});

const form = ref();

const rules = {
  name: [
    { required: true, message: "请输入名称", trigger: "blur" },
    { min: 1, max: 254, message: "长度在 1 到 253 个字符", trigger: "blur" }
  ],
  "labels.alias": [
    { min: 1, max: 254, message: "长度在 1 到 253 个字符", trigger: "blur" }
  ],
  namespace: [{ required: true, message: "请选择命名空间", trigger: "change" }],
  "annotations.description": [
    { min: 0, max: 254, message: "长度在 0 到 253 个字符", trigger: "blur" }
  ]
};

defineExpose({
  validate: fn => form.value.validate(fn)
});
</script>

<template>
  <el-form ref="form" :model="metadata" label-position="top" :rules="rules">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="名称" prop="name">
          <el-input v-model="metadata.name" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="别名" prop="labels.alias">
          <el-input v-model="metadata.labels.alias" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="命名空间" prop="namespace">
          <NamespaceSelector v-model:model-value="metadata.namespace" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="描述信息" prop="annotations.description">
          <el-input
            v-model="metadata.annotations.description"
            type="textarea"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="scss" scoped></style>
